<template>
  <div class="app-container">
    <el-card header="通道列表" v-if="id">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="RefreshRight" @click="initData(id)" v-hasPermi="['iot:gb:getChannels']">
            刷新
          </el-button>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="deviceChannelList" border>
        <el-table-column prop="name" label="名称" min-width="180" align="center" fixed></el-table-column>
        <el-table-column prop="deviceId" label="编号" min-width="180" align="center"></el-table-column>
        <el-table-column prop="manufacturer" label="厂家" min-width="100" align="center"></el-table-column>
        <el-table-column label="位置信息" min-width="120" align="center">
          <template v-slot:default="scope">
            <span size="medium"
                  v-if="scope.row.longitude && scope.row.latitude">{{ scope.row.longitude }}<br/>{{
                scope.row.latitude
              }}</span>
            <span size="medium" v-if="!scope.row.longitude || !scope.row.latitude">无</span>
          </template>
        </el-table-column>
        <el-table-column prop="ptzType" label="云台类型" min-width="100" align="center">
          <template v-slot:default="scope">
            <div>{{ scope.row.ptzTypeText }}</div>
          </template>
        </el-table-column>
        <el-table-column label="开启音频" min-width="100" align="center">
          <template v-slot:default="scope">
            <el-switch @change="updateChannel(scope.row)" v-model="scope.row.hasAudio" active-color="#409EFF">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="码流类型" min-width="180" align="center">
          <template v-slot:default="scope">
            <el-select size="mini" style="margin-right: 1rem;" @change="channelSubStreamChange(scope.row)"
                       v-model="scope.row.streamIdentification"
                       placeholder="请选择码流类型" default-first-option>
              <el-option label="stream:0(主码流)" value="stream:0"></el-option>
              <el-option label="stream:1(子码流)" value="stream:1"></el-option>
              <el-option label="streamnumber:0(主码流-2022)" value="streamnumber:0"></el-option>
              <el-option label="streamnumber:1(子码流-2022)" value="streamnumber:1"></el-option>
              <el-option label="streamprofile:0(主码流-大华)" value="streamprofile:0"></el-option>
              <el-option label="streamprofile:1(子码流-大华)" value="streamprofile:1"></el-option>
              <el-option label="streamMode:main(主码流-水星+TP-LINK)" value="streamMode:main"></el-option>
              <el-option label="streamMode:sub(子码流-水星+TP-LINK)" value="streamMode:sub"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="100" align="center">
          <template v-slot:default="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium" v-if="scope.row.status === 'ON'">在线</el-tag>
              <el-tag size="medium" type="info" v-if="scope.row.status !== 'ON'">离线</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="200" align="center" fixed="right">
          <template v-slot:default="scope">
            <el-button size="medium" icon="VideoPlay" v-bind:disabled="device == null || device.online === 0"
                       type="text" @click="sendDevicePush(scope.row)">播放
            </el-button>
            <el-button size="medium"
                       icon="VideoPause"
                       type="text" style="color: #f56c6c" v-if="stopShow"
                       @click="stopDevicePush(scope.row)">停止
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-show="total>0"
          :total="total"
          v-model:page="queryParams.page"
          v-model:limit="queryParams.count"
          @pagination="initData"
      />
    </el-card>
    <el-card v-else>
      <el-empty description="deviceId 不能为空！">
        <el-button type="primary" @click="goToDeviceList">返回设备列表</el-button>
      </el-empty>
    </el-card>
  </div>

  <el-dialog
      title="播放视频"
      v-model="showVideoPlayer"
      width="800px" append-to-body>
    <easyPlayer ref="recordVideoPlayer" :videoUrl="vUrl" :height="false"></easyPlayer>
  </el-dialog>

</template>

<script setup name="ChannelList">
import {getChannels, getDeviceById, getChangeAudio, updateChannelID, start, stop} from "@/api/iot/gb";
import {onMounted} from "vue";
import {ElMessage} from 'element-plus';
import easyPlayer from '@/views/media/cloudRecord/components/easyPlayer.vue'

const route = useRoute();
const router = useRouter();
const device = ref(null);
const id = ref(route.query.deviceId);
const vUrl = ref('');
const recordVideoPlayer = ref(null);
const showVideoPlayer = ref(false);
const stopShow = ref(false);

function goToDeviceList() {
  router.push({ path: "/media/cascade" });
}

/**
 * 停止播放
 * @returns {Promise<void>}
 */
async function stopDevicePush(itemData) {
  const query = {
    deviceId: id.value,
    channelId: itemData.deviceId
  }
  await stop(query);
  stopShow.value = false;
  recordVideoPlayer.value.pause();
  ElMessage({
    message: '操作成功！',
    type: 'success',
  })
}

/**
 * 播放
 * @param itemData
 * @returns {Promise<void>}
 */
async function sendDevicePush(itemData) {
  const query = {
    deviceId: id.value,
    channelId: itemData.deviceId
  }
  const res = await start(query);
  if (res.data) {
    vUrl.value = res.data.flv;
    showVideoPlayer.value = true;
    setTimeout(() => {
      itemData.streamId = res.data.stream;
      stopShow.value = true;
    }, 1000)
  }
}

/**
 * 修改通道的码流类型
 * @param row
 * @returns {Promise<void>}
 */
async function channelSubStreamChange(row) {
  const query = {
    deviceDbId: row.deviceDbId,
    id: row.id,
    streamIdentification: row.streamIdentification
  }
  await updateChannelID(query);
  ElMessage({
    message: '操作成功！',
    type: 'success',
  })
}

/**
 * 开启/关闭通道的音频
 * @param row
 * @returns {Promise<void>}
 */
async function updateChannel(row) {
  const query = {
    channelId: row.id,
    audio: row.hasAudio
  };
  await getChangeAudio(query);
  ElMessage({
    message: '操作成功！',
    type: 'success',
  })
}

/**
 * 获取设备
 * @param deviceId
 * @returns {Promise<void>}
 */
async function getDevice(deviceId) {
  const query = {
    deviceId: deviceId,
  };
  const res = await getDeviceById(query);
  device.value = res.data;
}

/**
 * 获取通道
 * @type {*}
 */
const queryParams = ref({
  page: 1,
  count: 10,
  deviceId: ''
})
const total = ref(0);
const deviceChannelList = ref([]);
const loading = ref(true);

async function initData(deviceId) {
  loading.value = true;
  queryParams.value.deviceId = deviceId;
  const res = await getChannels(queryParams.value);
  if (res.data) {
    total.value = res.data.total;
    deviceChannelList.value = res.data.list;
    loading.value = false;
  }
}

onMounted(async () => {
  if (route.query.deviceId) {
    await getDevice(route.query.deviceId);
    await initData(route.query.deviceId);
  } else {
    ElMessage.error('deviceId 不能为空！')
  }
})

</script>

<style scoped>

</style>